{% extends "_base_home.html" %}
{% block main %}
<script src="/static/page/user.js"></script>

<table id="user_table"></table>

<nav >
    <ul class="pagination float-right">

    </ul>
</nav>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">修改用户信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="modify">
                    <div class="form-group">
                        <label for="username" class="col-form-label">用户名:</label>
                        <input type="text" class="form-control" id="username">
                    </div>
                    <div class="form-group">
                        <label for="phone" class="col-form-label">手机号:</label>
                        <input class="form-control" id="phone"></input>
                    </div>
                    <div class="form-group">
                        <label for="email" class="col-form-label">邮箱:</label>
                        <input class="form-control" id="email"></input>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submitBtn" >提交</button>
            </div>
        </div>
    </div>
</div>

<script>
    let result = {{ result | raw }};
    let users = result.records;
    let modifyId = '';
    console.log('users',users)
    function renderPage(){
        $(".pagination").append('<li class="page-item">\n' +
            '            <a class="page-link" href="/users">首页</a>\n' +
            '        </li>')
        for(let i=0;i<result.totalPages;i++){
            let index = i+1;
            const active = index===result.currentPage?' active':'';
            $(".pagination").append(`<li class="page-item ${active}"><a class="page-link" href="/users?page=${index}">${index}</a></li>`)
        }
        if(result.currentPage!==result.totalPages){
            $(".pagination").append(`<li class="page-item">
            <a class="page-link" href="/users?page=${result.currentPage+1}">下一页</a>
        </li>`)
        }
    }
    function format (value, row, index) {
        return `
            <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#exampleModal" data-username="${row.username}" data-phone="${row.phone}" data-email="${row.email}" data-id="${row.id}">编辑</button>
            <button data-id="${row.id}" onclick="removeUser(${row.id})" class="btn btn-sm btn-danger">删除</button>
          `;
    }
    $('#exampleModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var phone = button.data('phone') // Extract info from data-* attributes
        var username = button.data('username') // Extract info from data-* attributes
        var email = button.data('email') // Extract info from data-* attributes
        // // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this)
        modal.find('.modal-body #username').val(username)
        modal.find('.modal-body #phone').val(phone)
        modal.find('.modal-body #email').val(email)
        modifyId = button.data('id')
    })
  $(document).ready(function(){
    initTable("user_table", users, format)
      renderPage();
      $('#submitBtn').click(function (e) {
          e.preventDefault();
          var data = {
              username: $('#username').val(),
              phone: $('#phone').val(),
              email: $('#email').val(),
              id: modifyId
          };
          $.ajax({
              type: 'POST',
              url: '/api/updateUser',
              data: JSON.stringify(data),
              success: function (resp) {
                  if (resp.code === 200) {
                      alert('更新成功');
                      location.reload();
                  } else {
                      alert(resp.info)
                  }
              },
              contentType: 'application/json;charset=UTF-8',
              dataType: 'json'
          });
      });
  })
</script>
{% endblock %}
